<template>
	<div class="card-fill layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<div style="text-align: right">
				<el-button type="primary" @click="onCreate()" v-auth="'/api/_FrameworkMenu/Add'">
					<i class="fa fa-plus"></i>
					{{ $t('message._system.common.vm.add') }}
				</el-button>
				<el-button type="danger" @click="onBatchDelete()" v-auth="'/api/_FrameworkMenu/BatchDelete'">
					<i class="fa fa-trash"></i>
					{{ $t('message._system.common.vm.delete') }}
				</el-button>
				<el-button type="primary" @click="onExport()" v-auth="'/api/_FrameworkMenu/ExportExcel'">
					<i class="fa fa-download"></i>
					{{ $t('message._system.common.vm.export') }}
				</el-button>
				<el-button type="primary" @click="onRefresh()" v-auth="'/api/_FrameworkMenu/RefreshMenu'">
					<i class="fa fa-refresh"></i>
					{{ $t('message._admin.menu.vm.Refresh') }}
				</el-button>
			</div>
			<WtmTable ref="tableRef" v-bind="tableData">
				<template #operation>
					<el-table-column :label="$t('message._system.common.vm.operate')">
						<template v-slot="scope">
							<el-button text type="primary" @click="onEdit(scope.row)" v-auth="'/api/_FrameworkMenu/Edit'"
								>{{ $t('message._system.common.vm.edit') }}
							</el-button>
							<el-button text type="primary" @click="onDetail(scope.row)" v-auth="'/api/_FrameworkMenu/{id}'"
								>{{ $t('message._system.common.vm.detail') }}
							</el-button>
							<el-popconfirm :title="$t('message._system.common.vm.deletetip')" @confirm="onDelete(scope.row)">
								<template #reference>
									<el-button text type="danger" v-auth="'/api/_FrameworkMenu/BatchDelete'">
										{{ $t('message._system.common.vm.delete') }}
									</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</template>
			</WtmTable>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="message._system.menukey.MenuMangement;true;HengTong.Areas._Admin.Controllers;FrameworkMenu">
import { defineAsyncComponent, onMounted, ref, getCurrentInstance } from 'vue';
import { ElMessage } from 'element-plus';
import frameworkmenuApi from '/@/api/frameworkmenu';
import other from '/@/utils/other';

const ci = getCurrentInstance() as any;
// 引入组件
const createDialog = defineAsyncComponent(() => import('./create.vue'));
const editDialog = defineAsyncComponent(() => import('./edit.vue'));
const detailDialog = defineAsyncComponent(() => import('./detail.vue'));

// 定义变量内容
const tableRef = ref();
const tableData = ref({
	// 列表数据（必传）
	data: [],
	// 表头内容（必传，注意格式）
	header: [
		{
			key: 'PageName',
			colWidth: '',
			title: ci.proxy.$t('message._admin.menu.vm.PageName'),
			type: 'text',
			isCheck: true,
		},
		{
			key: 'ModuleName',
			colWidth: '',
			title: ci.proxy.$t('message._admin.menu.vm.ModuleName'),
			type: 'text',
			isCheck: true,
		},
		{
			key: 'ShowOnMenu',
			colWidth: '',
			title: ci.proxy.$t('message._admin.menu.vm.ShowOnMenu'),
			type: 'switch',
			isCheck: true,
		},
		{
			key: 'FolderOnly',
			colWidth: '',
			title: ci.proxy.$t('message._admin.menu.vm.FolderOnly'),
			type: 'switch',
			isCheck: true,
		},
		{
			key: 'IsPublic',
			colWidth: '',
			title: ci.proxy.$t('message._admin.menu.vm.IsPublic'),
			type: 'switch',
			isCheck: true,
		},
		{
			key: 'TenantAllowed',
			colWidth: '',
			title: ci.proxy.$t('message._admin.menu.vm.TenantAllowed'),
			type: 'switch',
			isCheck: true,
		},
		{
			key: 'DisplayOrder',
			colWidth: '',
			title: ci.proxy.$t('message._admin.menu.vm.DisplayOrder'),
			type: 'text',
			isCheck: true,
		},
		{
			key: 'Icon',
			colWidth: '',
			title: ci.proxy.$t('message._admin.menu.vm.Icon'),
			type: 'icon',
			isCheck: true,
		},
	],
	// 配置项（必传）
	config: {
		total: 0, // 列表总数
		loading: true, // loading 加载
		isSerialNo: false, // 是否显示表格序号
		isSelection: true, // 是否显示表格多选
		isOperate: true, // 是否显示表格操作栏
	},
});

// 初始化表格数据
const getTableData = () => {
	tableRef.value.doSearch(frameworkmenuApi().search, {}, true).catch((error: any) => {
		other.setFormError(ci, error);
	});
};
// 打开新增弹窗
const onCreate = () => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.add'), createDialog, null, getTableData);
};
// 打开修改弹窗
const onEdit = (row: any) => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.edit'), editDialog, row, getTableData);
};
const onDetail = (row: any) => {
	other.openDialog(ci.proxy.$t('message._system.common.vm.detail'), detailDialog, row, getTableData);
};
// 删除
const onDelete = (row: any) => {
	frameworkmenuApi()
		.delete([row.ID])
		.then(() => {
			getTableData();
		});
};
const onRefresh = () => {
	frameworkmenuApi()
		.refresh()
		.then(() => {
			ElMessage.success(ci.proxy.$t('message._system.common.vm.submittip'));
		});
};
const onBatchDelete = () => {
	const selected = tableRef.value.getSelectedRows();
	frameworkmenuApi()
		.delete(selected.map((x: any) => x.ID))
		.then(() => {
			getTableData();
		});
};
const onExport = () => {
	const selected = tableRef.value.getSelectedRows();
	if (selected.length > 0) {
		frameworkmenuApi().exportById(selected.map((x: any) => x.ID));
	} else {
		frameworkmenuApi().export({});
	}
};

// 页面加载时
onMounted(() => {
	getTableData();
});
</script>

<style scoped lang="scss">
.card-fill {
	height: 100%;
	display: flex;
	flex-direction: column;

	:deep(.el-card) {
		flex: 1;
		display: flex;
		flex-direction: column;

		.el-card__body {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}
	}
}

// 优化树形表格的展示效果
:deep(.el-table) {
	// 树形结构的缩进优化
	.el-table__expand-icon {
		font-size: 14px;
		margin-right: 8px;
		color: var(--el-text-color-secondary);
		transition:
			transform 0.3s ease,
			color 0.3s ease;

		&:hover {
			color: var(--el-color-primary);
		}

		&.el-table__expand-icon--expanded {
			transform: rotate(90deg);
		}
	}

	// 优化表格行的高度和间距
	.el-table__body-wrapper {
		.el-table__row {
			td {
				.el-table__cell {
					padding: 12px 8px;

					// 优化switch开关的对齐
					.el-switch {
						vertical-align: middle;
					}
				}
			}
		}
	}

	// 优化表头样式
	.el-table__header-wrapper {
		th {
			background-color: var(--el-fill-color-light);
			font-weight: 600;
			color: var(--el-text-color-primary);

			.el-table__cell {
				padding: 14px 8px;
			}
		}
	}

	// 优化图标列的显示
	.cell {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		i {
			font-size: 16px;
		}
	}

	// 优化操作列的按钮间距
	.el-button + .el-button {
		margin-left: 8px;
	}

	// 树形表格的层级缩进优化
	.el-table__indent {
		padding-left: 20px;
	}
}

// 优化顶部操作按钮区域
.el-button {
	margin-left: 8px;

	i {
		margin-right: 4px;
	}

	&:first-child {
		margin-left: 0;
	}
}

// 响应式优化
@media screen and (max-width: 1366px) {
	:deep(.el-table) {
		font-size: 13px;

		.el-table__cell {
			padding: 10px 6px !important;
		}
	}
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
	:deep(.el-table) {
		.el-table__header-wrapper th {
			background-color: var(--el-fill-color-dark);
		}
	}
}
</style>
